

use yew::prelude::*;
use yew_router::prelude::use_navigator;

use crate::app::Route;

#[derive(Debug, PartialEq, Properties)]
pub struct Props {
    pub children: Children, //Children 是一个特殊的类型，用于表示组件的子组件或 HTML 元素。
}

#[function_component(Container)]
pub fn container(props: &Props) -> Html {
    //使用 use_navigator hook 获取一个导航器实例，用于在应用中实现页面跳转。
    let navigator = use_navigator().unwrap(); 

    let set_title = Callback::from(move |content: String| {
        //设置网页的标题
        web_sys::window()
            .unwrap()
            .document()
            .unwrap()
            .set_title(&format!("{content} - Blog"));
    });

    //创建一个函数，该函数接受一个 Route 枚举值，并返回一个回调。这个回调在被调用时会使用导航器跳转到指定的路由。
    let jump = move |route| Callback::from(
        move |_| navigator.push(&route)
    );

    html! {
        <>
            <nav> //<nav> 元素包含了一个导航链接，点击时会调用 jump 函数并跳转到 Route::Home
                <a onclick={jump(Route::Home)} class="brand">
                    <span>{"Blog"}</span>
                </a>
            </nav>

            <ContextProvider<Callback<String>> context={set_title}> //使用 ContextProvider 组件来提供 set_title 的回调，以便在子组件中设置标题
                {for props.children.iter()} //遍历并渲染 props.children 中的所有子组件或 HTML 元素
            </ContextProvider<Callback<String>>>

        </>
    }
}